<template>
  <div class="wrap" v-show="isShow">
    <div class="content">
      <p class="title">选择</p>
      <div class="suttle_box">
        <div class="left">
          <div class="left-title">待选</div>
          <div class="search">
            <div class="search-img">
              <div class="img"></div>
            </div>
            <input
              type="text"
              placeholder="搜索部门 / 人员"
              v-model="filterText"
            />
          </div>
          <div class="tree_box">
            <div class="tree">

              <el-tree
                ref="leftTree"
                :data="personnel_lists"
                show-checkbox
                empty-text="暂无无数据"
                node-key="id"
                default-expand-all
                :expand-on-click-node="true"
                icon-class="el-icon-arrow-right"
                @check-change="leftTreeChange"
                :highlight-current="true"
                :filter-node-method="filterNode"
                :check-strictly="true"
                v-if="leftTreeShow"
                @node-expand="nodeExpand"
                @node-collapse="nodeCollapse"
                :default-expanded-keys="leftOpenList"
                :default-checked-keys="leftOpenOne"
              >
                <template #default="{ node }">
                  <span class="custom-tree-node">
                    <!--                  <div class="img" v-show="node.label.indexOf('/$*') != -1">-->
                    <!--                    <img-->
                    <!--                      :src="node.label.substr(node.label.indexOf('/$*') + 3)"-->
                    <!--                      alt=""-->
                    <!--                    />-->
                    <!--                  </div>-->
                    <!--                  <span>{{-->
                    <!--                      node.label.substr(-->
                    <!--                        0,-->
                    <!--                        node.label.indexOf('/$*') == -1-->
                    <!--                          ? node.label.length-->
                    <!--                          : node.label.indexOf('/$*')-->
                    <!--                      )-->
                    <!--                    }}</span>-->
<!--                    <div-->
<!--                      class="head"-->
<!--                      v-show="-->
<!--                        node.label.substr(node.label.indexOf('/*?') + 3) == 2-->
<!--                      "-->
<!--                    >-->
<!--                      {{ node.label.substr(node.label.indexOf("/*?") - 2, 2) }}-->
<!--                    </div>-->
<!--                    <span-->
<!--                      v-show="-->
<!--                        node.label.substr(node.label.indexOf('/*?') + 3) == 2-->
<!--                      "-->
<!--                    >-->
<!--                      {{ node.label.substr(node.label.indexOf("/*?") - 2, 2) }}-->
<!--                    </span>-->
                    <span>
                      {{ node.label}}
                    </span>
                  </span>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="center">
          <div
            :class="{ right: true, pitch: leftPitch.length != 0 }"
            @click="rightMove"
          >
            <div class="img" style="margin-right: 0.15rem;">
              <img src="@/assets/appraise/icon/appraise_jiantou.png" alt="" />
            </div>
          </div>
<!--          <div-->
<!--            :class="{ left: true, pitch: rightPitch.length != 0 }"-->
<!--            @click="leftMove"-->
<!--          >-->
<!--            <div class="img" style="margin-right: 0.15rem;">-->
<!--              <img src="@/assets/appraise/icon/appraise_jiantou.png" alt="" />-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="right">
          <div class="right-title">已选</div>
          <div class="tree_box">
            <div class="tree">
              <el-tree
                ref="rightTree"
                :data="datas"
                empty-text="请选择数据"
                node-key="id"
                :expand-on-click-node="false"
                icon-class="el-icon-arrow-right"
                :highlight-current="true"
              >
                <template slot-scope="{ node, data }">
                  <span style="width: 100%"
                    class="custom-tree-node">
                    <!--                  <div class="img" v-show="node.label.indexOf('/$*') != -1">-->
                    <!--                    <img-->
                    <!--                      :src="node.label.substr(node.label.indexOf('/$*') + 3)"-->
                    <!--                      alt=""-->
                    <!--                    />-->
                    <!--                  </div>-->
                    <!--                  <span>{{-->
                    <!--                      node.label.substr(-->
                    <!--                        0,-->
                    <!--                        node.label.indexOf('/$*') == -1-->
                    <!--                          ? node.label.length-->
                    <!--                          : node.label.indexOf('/$*')-->
                    <!--                      )-->
                    <!--                    }}</span>-->
                    <div>
<!--                      <div-->
<!--                        class="head"-->
<!--                        v-show="-->
<!--                        node.label.substr(node.label.indexOf('/*?') + 3) == 2-->
<!--                      "-->
<!--                      >-->
<!--                      {{ node.label.substr(node.label.indexOf("/*?") - 2, 2) }}-->
<!--                    </div>-->
<!--                    <span-->
<!--                      v-show="-->
<!--                        node.label.substr(node.label.indexOf('/*?') + 3) == 2-->
<!--                      "-->
<!--                    >-->
<!--                      {{ node.label.substr(node.label.indexOf("/*?") - 2, 2) }}-->
<!--                    </span>-->
                    <span>
                      {{ node.label}}
                    </span>
                    </div>
                    <div @click.prevent="leftMove(data)">
                      <i class="el-icon-circle-close"></i>
                    </div>
                  </span>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_btn">
        <el-button class="btn_affirm" type="primary" size="mini" @click="affirm"
          >确认</el-button
        >
        <el-button size="mini" class="btn_cancel" @click="cancel"
          >取消</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isShow: { //控制组件的显示
      type: Boolean,
      default: false,
    },
    personnel_list: { // 左边tree数据
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      personnel_lists: [], // 左边tree数据
      datas: [], // 右边tree数据
      leftPitch: [], // 左边选中节点
      rightPitch: [], // 右边选中节点
      filterText: "", // 绑定搜索输入框
      leftTreeShow: true,// 更新视图
      leftOpenList: [], // 左边tree默认展开
      leftOpenOne: [], // 左边tree默认显示
      nodeKey:''
    };
  },
  watch: {
    // val 搜索的值，实现搜索功能
    filterText(val) {
      this.$refs.leftTree.filter(val);
    },
    // 将 lable 和 type 通过 /*? 拼接，实现tree中头像显示
    personnel_lists() {
      // let list = this.personnel_lists;
      // if(list.length > 0){
      //   initPropsList(list);
      // }
      // function initPropsList(list) {
      //   if (list instanceof Array) {
      //     for (let i = 0; i < list.length; i++) {
      //       if (list[i].lable != "" || list[i].type != "") {
      //         list[i].label = list[i].label;
      //       }
      //       if (list[i].children instanceof Array) {
      //         initPropsList(list[i].children);
      //       }
      //     }
      //   }
      // }
    },
    // 关闭时存储数据，打开加载存储数据
    isShow() {
      if (this.isShow) {
        let data = sessionStorage.getItem("ShuttleBoxData");
        if (data != undefined) {
          data = JSON.parse(data);
          this.personnel_lists = data.personnel_list;
          this.datas = data.datas;
        }
      } else {
        this.setData();
      }
    },
    // 判断是否使用本地存储数据
    personnel_list(nv) {
      console.log(nv)
      let data = sessionStorage.getItem("ShuttleBoxData");
      if (data == undefined) {
        this.personnel_lists = this.personnel_list;
        this.datas = []
      }else{
        data = JSON.parse(data);
        this.personnel_lists = data.personnel_list;
        this.datas = data.datas;
      }
    },
  },
  // 组件销毁，存储数据
  destroyed() {
    this.setData();
  },
  methods: {
    // 将选中数据存储到 sessionStorage 中
    setData() {
      let data = {
          personnel_list: this.personnel_lists,
          datas: this.datas,
        };
        if (data.personnel_list.length > 0)
          sessionStorage.setItem("ShuttleBoxData", JSON.stringify(data));
    },
    //确认
    affirm() {
      if (this.datas.length > 1) {
        let list = []
        for (let i = 0; i < this.datas.length; i++) {
          let obj = {}
          for (let k in this.datas[i]){
            obj[k] = this.datas[i][k]
          }
          let name = obj.label
          this.$set(obj,'label',name)
          list.push(obj)
        }
        console.log('list ---', list)
        this.$emit("allShuttleBox", list);
      }
      this.$emit("shut", false);
    },
    //取消
    cancel() {
      this.$emit("shut", false);
    },
    //选中左侧
    leftTreeChange() {
      let arr = this.$refs.leftTree.getCheckedNodes();
      this.leftPitch = arr;
      this.leftOpenOne = [];
      for (let i = 0; i < arr.length; i++) {
        if (this.leftOpenOne.indexOf(arr[i].id) == -1) {
          this.leftOpenOne.push(arr[i].id);
        } else {
          this.leftOpenOne.splice(this.leftOpenOne.indexOf(arr[i].id), 1);
        }
      }
      let start = [];
      if (this.datas.length > 0) {
        // 已经有选中数据，优先使用
        start = this.datas[0];
      } else if (this.leftPitch.length > 0) {
        // 无选中数据，使用待移动数据
        start = this.leftPitch[0];
      } else {
        // 没有数据，全部所有 禁用状态，且结束本次方法
        this.initPropsListClear(this.personnel_lists);
        this.uploadList();
        return;
      }
      this.initPropsList(this.personnel_lists, start);
      this.uploadList();
    },
    // 通过判断start的type，将list中和start的type不同设置禁用状态
    initPropsList(list, start) {
      if (list instanceof Array) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].type != start.type) {
            list[i].disabled = true;
          }
          if (list[i].children instanceof Array) {
            this.initPropsList(list[i].children, start);
          }
        }
      }
    },
    // 清空list中 禁用状态
    initPropsListClear(list) {
      if (list instanceof Array) {
        for (let i = 0; i < list.length; i++) {
          list[i].disabled = false;
          if (list[i].children instanceof Array) {
            this.initPropsListClear(list[i].children);
          }
        }
      }
    },
    // 将左边已经选中的移动到右边
    rightMove() {
      function indexOf(list, item) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].id == item.id) {
            return false;
          }
        }
        return true;
      }

      function indexOfRemove(list) {
        if (list.length < 2) return;
        let start = list[0];
        for (let i = 1; i < list.length; i++) {
          if (list[i].type != start.type) {
            list.splice(i, 1);
            i--;
          }
        }
      }

      // 左边往右边添加数据
      // 将左边选中的添加到右边
      for (let index = 0; index < this.leftPitch.length; index++) {
        let obj = {};
        for (var k in this.leftPitch[index]) {
          obj[k] = this.leftPitch[index][k];
        }
        if (obj.disabled == undefined || obj.disabled == false) {
          if (obj.children != undefined) obj.children = [];
          let show = indexOf(this.datas, obj);
          if (show) {
            this.datas.push(obj);
          }
        }
      }
      indexOfRemove(this.datas);
      this.getChecksAll(this.personnel_lists, 0);
      this.leftPitch = [];
      let arr = document.querySelectorAll(".is-indeterminate");
      for (let index = 0; index < arr.length; index++) {
        arr[index].className = "el-checkbox__input";
      }
    },
    // 将右边已经选中的移动到左边
    leftMove(data) {
      this.rightPitch.push(data)
      // 右边往左边添加数据
      this.getChecksAll(this.personnel_lists, 1);
      this.rightPitch = [];
      let start = [];
      if (this.datas.length > 0) {
        // 已经有选中数据，优先使用
        start = this.datas[0];
      } else if (this.leftPitch.length > 0) {
        // 无选中数据，使用待移动数据
        start = this.leftPitch[0];
      } else {
        // 没有数据，全部所有 禁用状态，且结束本次方法
        this.initPropsListClear(this.personnel_lists);
        this.uploadList();
        return;
      }
    },
    // arr 处理元素，val 值： 0 1
    // val 为 0：将左边选中的设置为禁用
    // val 为 1：右边选中移动到左边，删除右边数据，将左边禁用取消
    getChecksAll(arr, val) {
      let indexOf = function (list, i) {
        for (let index = 0; index < list.length; index++) {
          if (list[index].id == i.id) {
            return index;
          }
        }
        return -1;
      };
      if (arr instanceof Array) {
        arr.map((item) => {
          if (item.id && val == 0) {
            if (indexOf(this.leftPitch, item) != -1) {
              if (item.children == undefined) {
                if (this.datas[0].type == 2) {
                  item.disabled = true;
                  this.$refs.leftTree.setChecked(item.id, false, false);
                } else {
                  this.$refs.leftTree.setChecked(item.id, false, false);
                }
              } else {
                item.disabled = true;
                this.$refs.leftTree.setChecked(item.id, false, false);
              }
            }
            this.getChecksAll(item.children, val);
          } else if (item.id && val == 1) {
            if (indexOf(this.rightPitch, item) > -1) {
              item.disabled = false;
              this.$refs.rightTree.remove(
                this.rightPitch[indexOf(this.rightPitch, item)]
              );
              this.$refs.leftTree.setChecked(item.id, false, false);
              this.uploadList();
            }
            this.getChecksAll(item.children, val);
          }
        });
      }
    },
    // 当personnel_lists更新，使用该方法更新视图
    uploadList() {
      this.leftTreeShow = false;
      setTimeout(() => {
        this.leftTreeShow = true;
      });
    },
    // value 搜索的值，data查找列表。实现搜索功能
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点被展开触发，将展开的数据存储，用来设置默认展示
    nodeExpand(obj) {
      if (this.leftOpenList.indexOf(obj.id) == -1) {
        this.leftOpenList.push(obj.id);
      }
    },
    // 节点关闭触发，将默认显示的该数据删除
    nodeCollapse(obj) {
      this.leftOpenList.splice(this.leftOpenList.indexOf(obj.id), 1);
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.wrap {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);

  .content {
    width: 880px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    padding: 10px;
    text-align: center;
  }

  .suttle_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 400px;
    align-items: center;
  }
}

.tree_box {
  width: 100%;
  height: 92.6%;
  border-radius: 6px;
  overflow: auto;
  padding: 10px 15px;
  box-sizing: border-box;
}

.left-title,
.right-title {
  height: 40px;
  background: #f6f7fa;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

.left,
.right {
  width: 408px;
  height: 400px;
  border: 1px solid #eceef5;
}
.search {
  margin: 15px 15px 0;
  border: 1px solid #f9f9f9;
  background: #fcfcfc;
  position: relative;
  height: 36px;
  border-radius: 18px;
}

.search .search-img {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

.head {
  display: inline-block;
  padding: 6px 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  margin-right: 5px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f1bc57),
    to(#f9ac79)
  );
}

.search .search-img .img {
  width: 14px;
  height: 14px;
  border: 1px solid #c2c4c9;
  box-sizing: border-box;
  position: relative;
  border-radius: 6px;
}

.search .search-img > .img::after {
  content: "";
  display: block;
  height: 8px;
  width: 2px;
  position: absolute;
  bottom: -0.3rem;
  right: -0.1rem;
  transform: rotate(-45deg);
  background: #c2c4c9;
}

.search input::-webkit-input-placeholder {
  color: #e2e2e2;
}

.search input::-moz-placeholder {
  color: #e2e2e2;
}

.search input::-ms-input-placeholder {
  color: #e2e2e2;
}

.search input {
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  display: inline-block;
  height: 100%;
  width: 100%;
  font-size: 12px;
  box-sizing: border-box;
  padding-left: 35px;
}

.tree {
  width: 100%;
  height: 100%;
}

.tree ul ul {
  display: none;
}

ul {
  list-style: none;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  cursor: pointer;
}

.center > div {
  width: 80px;
  height: 30px;
  background: #d8d8d8;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center div .img {
  width: 17px;
  height: 17px;
}

.center div .img img {
  float: left;
}

.center .right {
  transform: rotate(-180deg);
}

.center .pitch {
  background: #1a66e2;
}

.tree .img,
.tree img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.tree .img {
  display: inline-flex;
  transform: translateY(5px);
  margin-right: 4px;
}

.footer_btn {
  width: 100%;
  padding: 20px;
  text-align: right;
}

.btn_cancel {
  border: none;
  font-size: 16px;
  background: #fff4f2;
  color: #d62020;

  &:hover {
    background-color: #fff0ee;
  }
}

.btn_affirm {
  border: none;
  font-size: 16px;
  margin-right: 30px;
  background: #eaeefe;
  color: #1a66e1;

  &:hover {
    background-color: #e6eaff;
  }
}
</style>
<style>
.is-checked + span {
  color: #1a66e2;
}

.el-tree-node__content {
  height: 40px !important;
  margin-left: 10px;
  padding-left: 0px !important;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.el-tree-node__content > label.el-checkbox {
  margin-right: 10px;
  margin-left: 10px;
  position: absolute;
  left: -0.7rem;
}

.tree_box::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
}

.tree_box::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.tree_box::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  background-clip: padding-box;
  min-height: 28px;
}

.tree_box::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
</style>
